<template>
  <div class="login">
    <!-- 头顶图片 -->
    <div class="topimg">
      <img
        src="https://sta.gtimg.com/mobile/static/images/top_red_13.png"
        alt=""
      />
    </div>
    <!-- 登录内容 -->
    <div class="box">
      <!-- 图标 -->
      <div class="logo">
        <img
          src="https://sta.gtimg.com/mobile/static/images/qd_icon.png"
          alt=""
        />
      </div>
      <!-- 账号密码 -->
      <div v-show="fals == 1" class="signin">
        <div class="number">
          <span class="iconfont icon-31wode"></span>
          <input
            type="text"
            v-model="account"
            placeholder="请输入邮箱/个性账号"
          />
        </div>
        <div class="password">
          <span class="iconfont icon-mima"></span>
          <input type="password" v-model="password" placeholder="请输入密码" />
        </div>
      </div>
      <!-- 手机号登录 -->
      <div v-show="fals == 2" class="signin">
        <div class="number">
          <span class="span iconfont icon-shouji"><span>+86</span></span>
          <input v-model="phone" type="text" placeholder="请输入手机号" />
        </div>
        <div class="password">
          <input
            v-model="verification"
            type="text"
            placeholder="请输入短信验证码"
          />
          <div
            v-show="fasl == true"
            @click="getCode"
            :class="phonenum == 11 ? 'verifications' : 'verification'"
          >
            点击获取验证码
          </div>
          <div v-show="fasl == false" class="verification">
            <van-count-down
              ref="countDown"
              millisecond
              :auto-start="false"
              format="ss:SSS"
              @finish="finish"
              :time="time"
            >
              <template #default="timeData">
                <span class="block textcon"
                  >({{ timeData.seconds }})重新发送</span
                >
              </template>
            </van-count-down>
          </div>
        </div>
      </div>
      <div v-show="fals == 1" class="sininbottom">
        <div>忘记密码</div>
        <div>用户注册</div>
      </div>
      <div @click="gobtn" class="btn">登录</div>
      <div class="switch">
        <div class="qq">
          <div class="divr qqlogo iconfont icon-QQ"></div>
          <div>QQ</div>
        </div>
        <div v-show="fals == 1" @click="fals = 2" class="qq">
          <div class="divr iconfont icon-shouji"></div>
          <div>短信登录</div>
        </div>
        <div v-show="fals == 2" @click="fals = 1" class="qq">
          <div class="divr iconfont icon-shenfenzheng"></div>
          <div>阅通行证</div>
        </div>

        <div class="qq">
          <div
            is-link
            @click="showPopup"
            class="divr iconfont icon-gengduosangedian"
          ></div>
          <div>更多</div>
        </div>
      </div>
      <van-popup
        close-on-popstate
        close-icon="close"
        v-model="show"
        position="bottom"
        :style="{ height: '20%' }"
      >
        <div class="switch">
          <div class="qq">
            <div class="divr iconfont icon-weibo"></div>
            <div>微博</div>
          </div>
          <div class="qq">
            <div class="divr iconfont icon-zhifubaozhifu"></div>
            <div>支付宝</div>
          </div>
          <div class="qq">
            <div class="divr iconfont icon-baidu"></div>
            <div>百度</div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      fals: 1, //手机登入和账号登入切换
      fasl: true, //验证码判断
      time: 60000, //验证码倒计时
      show: false, //判断是否弹出
      account: "", //账号
      password: "", //密码
      phone: "", //手机号码
      phonenum: "", //输入的手机号长度
      verification: "", //验证码
    };
  },
  methods: {
    //更多弹出框
    showPopup() {
      this.show = true;
    },
    //开始倒计时
    start() {
      this.$refs.countDown.start();
    },
    //从新开始计时
    reset() {
      this.$refs.countDown.reset();
    },
    //可重新发送
    finish() {
      this.fasl = !this.fasl;
      console.log(this.fasl);
      this.reset();
    },
    //账号登录
    gobtn() {
      let regCode = /1234567890/; //密码
      let regaccount = /江户川胡芦娃/; //账号
      let regverification = /6666/; //验证码

      // 验证码
      if (
        (regCode.test(this.password) && regaccount.test(this.account)) ||
        regverification.test(this.verification)
      ) {
        Toast("登入成功");
        window.localStorage.setItem("token", this.account || this.phone);
        window.localStorage.setItem("currency", 0);
        window.localStorage.setItem("bookshelf","");
        window.localStorage.setItem("upperlevel",0);
        window.localStorage.setItem("need",100);
        this.$router.push("/schoolboy");
        return;
      } else {
        if (this.fals == 1) {
          if (this.account && this.password) {
            Toast("请输入正确账号或密码");
            this.account = "";
            this.password = "";
            return;
          } else if (this.account == "" || this.password == "") {
            Toast("请输入账号或密码");
          }
        }

        if (this.fals == 2) {
          if (this.verification) {
            Toast("验证码错误");
            this.verification = "";
            return;
          } else if (this.verification == "") {
            Toast("请输入验证码");
          }
        }
      }
    },
    // 验证码登录
    getCode() {
      // 1.验证手机号码
      let reg =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
      if (!reg.test(this.phone)) {
        Toast("请输入正确手机号码");
        return;
      } else if (reg.test(this.phone)) {
        Toast("已发送验证码");
        this.fasl = !this.fasl;
        console.log(this.fasl);
        this.start();
      }
    },
  },
  watch: {
    phone() {
      if (this.phone) {
        this.phonenum = this.phone.length;
      }
    },
  },
};
</script>

<style lang="less">
.login {
  .topimg {
    width: 100%;
    height: 80px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .box {
    width: 100%;
    height: calc(100% - 75px);
    top: 75px;
    position: absolute;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #ffffff;
    .logo {
      display: flex;
      justify-content: center;
      padding: 24px 0;
      img {
        height: 48px;
      }
    }
    .signin {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .number,
      .password {
        width: 311px;
        display: flex;
        padding: 15px 0px;
        border-bottom: 1px solid #f1f1f3;
        margin-bottom: 20px;
        .verification {
          height: 16px;
          border-radius: 35px;
          padding: 10px 15px;
          font-size: 12px;
          display: flex;
          color: white;
          background-color: #d0d2dd;
          align-items: center;
          .textcon {
            color: white;
            margin: 0px;
            font-size: 12px;
          }
        }
        .verifications {
          height: 16px;
          border-radius: 35px;
          padding: 10px 15px;
          font-size: 12px;
          color: white;
          display: flex;
          align-items: center;
          background-color: #ef444d;
          .textcon {
            color: white;
            margin: 0px;
            font-size: 12px;
          }
        }
        input {
          width: 63%;
          border: transparent;
        }
        ::-webkit-input-placeholder {
          color: #dddddf;
          font-size: 15px;
        }
        span {
          color: #dddddf;
          display: inline-block;
          margin-right: 10px;
          padding: 0px 5px;
          font-size: 18px;
          text-align: center;
          span {
            color: black;
            font-size: 14px;
            margin-right: 0px;
          }
        }
        .span {
          display: inline-block;
          margin-right: 0px;
          font-size: 24px;
        }
      }
    }
    .sininbottom {
      width: 311px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
      div {
        font-size: 12px;
        color: #0091de;
      }
    }
    .btn {
      height: 48px;
      line-height: 48px;
      width: 311px;
      font-size: 16px;
      color: white;
      margin: 0 auto;
      border-radius: 30px;
      text-align: center;
      margin-bottom: 40px;
      background-color: #f58083;
    }
    .switch {
      width: 100%;
      display: flex;
      margin-top: 7%;
      justify-content: center;
      align-items: center;

      .qq {
        width: 48px;
        margin: 0px 15px;
        text-align: center;
        .divr {
          width: 48px;
          height: 48px;
          line-height: 48px;
          font-size: 27px;
          background-color: #f7f8fa;
          border-radius: 50%;
          margin-bottom: 15px;
          color: #94a0b9;
          border: 1px solid #e7e9f1;
        }
        .qqlogo {
          color: #00acf4;
          background-color: #ebf9ff;
        }

        div {
          font-size: 12px;
          color: rgb(90, 90, 90);
        }
        .icon-weibo {
          color: #e6152d;
        }
        .icon-zhifubaozhifu {
          color: #00acf4;
        }
        .icon-baidu {
          color: #2023d3;
        }
      }
    }
  }
}
</style>